<template>
  <div class="app">
    <!-- interval为自动切换的时间 -->
    <div>
      <div>
        <span class="hot">热门推荐</span>
      </div>
      <div>
        <el-carousel :interval="2000" type="card" height="500px">
          <el-carousel-item v-for="(item,index) in posterList" :key="index">
            <img alt=""
                :src="item.url"
                style="width: 100%;height: 465px">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    
    <div class="as">

      <div style="padding-top: 40px" class="most-expect-wrapper">
        <div class="panel">
          <div class="panel-header">
            <span class="panel-more">
              <span class="panel-arrow panel-arrow-orange"></span>
            </span>
            <span class="panel-title">
              <span class="textcolor_orange">热门榜单Top10</span>
            </span>
          </div>
          <div class="panel-content">
            <ul class="ranking-wrapper ranking-mostExpect">
              <!-- 无序列表展示top1数据 -->
              <li class="ranking-item ranking-top ranking-index-1">
                <!-- 相当于超链接标签 :to类似与href -->
                <router-link :to="'/film/info?fid=' + top1.id" target="_blank">
                  <!-- 图片展示 -->
                  <div class="ranking-top-left">
                    <i class="ranking-top-icon"></i>
                    <!-- 对应t_film表 -->
                    <img class="ranking-img  default-img" :alt="top1.name" :src="top1.cover">
                  </div>
                  <!-- 信息展示 -->
                  <div class="ranking-top-right">
                    <div class="ranking-top-right-main">
                      <span class="ranking-top-moive-name">{{ top1.name }}</span>
                        <p class="ranking-release-time">上映时间：{{ top1.releaseTime }}</p>
                        <p class="ranking-top-wish">
                          <span class="stonefont">热度值: </span>{{ top1.hot }}
                        </p>
                    </div>
                  </div>
                </router-link>
              </li>

              <!-- 无序列表展示top3数据 -->
              <li class="ranking-item ranking-index-1">
                <router-link :to="'/film/info?fid=' + top2.id" target="_blank">
                  <div class="ranking-top-left">
                    <i class="ranking-top-icon"></i>
                    <!-- 对应t_film表 -->
                    <img class="ranking-img  default-img" :alt="top2.name" :src="top2.cover"/>
                  </div>

                  <!-- 信息展示 -->
                  <div class="ranking-top-right">
                    <div class="ranking-top-right-main">
                      <span class="ranking-top-moive-name">{{ top2.name }}</span>
                        <p class="ranking-release-time">上映时间：{{ top2.releaseTime }}</p>
                        <p class="ranking-top-wish">
                          <span class="stonefont">热度值: </span>{{ top2.hot }}
                        </p>
                    </div>
                  </div>
                </router-link>
              </li>

              <li class="ranking-item ranking-index-1">
                <div class="ranking-top-left">
                    <i class="ranking-top-icon"></i>
                    <!-- 对应t_film表 -->
                    <img class="ranking-img  default-img" :alt="top3.name" :src="top3.cover">
                  </div>
                  <!-- 信息展示 -->
                  <div class="ranking-top-right">
                    <div class="ranking-top-right-main">
                      <span class="ranking-top-moive-name">{{ top3.name }}</span>
                        <p class="ranking-release-time">上映时间：{{ top3.releaseTime }}</p>
                        <p class="ranking-top-wish">
                          <span class="stonefont">热度值: </span>{{ top3.hot }}
                        </p>
                    </div>
                  </div>
                </router-link>
              </li>

              <li v-for="(item, index) in topList" :key="index" class="ranking-item ranking-index-4">
                <router-link :to="'/film/info?fid=' + item.id" target="_blank">
                  <span class="normal-link">
                    <i class="ranking-index">{{ index + 4 }}</i>
                    <span class="ranking-movie-name">{{ item.name }}</span>
                    <span class="ranking-num-info"><span class="stonefont">热度值: </span>{{ item.hot }}</span>
                  </span>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
        </div>
    </div>

    <div class="main">
      <div class="movie-grid">
        <div class="panel">
          <div class="panel-header">
            <span class="panel-title">
              <span class="textcolor_orange">正在热播  ( {{ total.length }} )</span>
            </span>
          </div>
          <div class="panel-content">
            <dl class="movie-list">
              <dd v-for="item in arrangementList"> 
                <router-link :to="'/film/info?fid=' + item.id">
                  <div class="movie-item">
                    <div class="movie-poster">
                      <!-- <img class="poster-default" alt=""
                           :src="item.cover"> -->
                      <img class="movie-poster-img" alt="" :src="item.cover">
                      <div class="movie-overlay movie-overlay-bg">
                        <div class="movie-info">
                          <div class="movie-title" title="">{{ item.name }}</div>
                        </div>
                      </div>
                    </div>
                    <div class="movie-ver"></div>
                  </div>
                  <div class="movie-detail movie-rt">{{ item.releaseTime }} 上映</div>
                </router-link>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {ListAllFilm, ListAllPoster, ListHots,FindFilmById,AllFilm} from "@/api/film";
import FooterVue from '../components/layout/Footer.vue';

export default {

  data() {
    return {
      top1: {},
      top2: {},
      top3: {},
      topList: [],
      filmList: [],
      arrangementList:[],
      total:[],
      posterList: []
    }
  },

  mounted() {   
    ListAllFilm().then(res => {
      this.filmList = res.data
    })
    AllFilm().then(res => {
      this.total=res.data
      console.log("res==",res.data);
      for(let  i of this. total){
        console.log("");
        FindFilmById(i.fid).then(res=>{
          this.arrangementList.push(res.data)
        })
      }
      console.log("arrangementList",this.arrangementList);
    })
    console.log(this.arrangementList);
    ListAllPoster().then(res => {
      this.posterList = res.data;
    })

    //获取热门电影      
    ListHots().then(res => {
      this.topList = res.data
      this.top1 = this.topList[0]
      this.top2 = this.topList[1]
      this.top3 = this.topList[2]
      this.topList.splice(0, 3)
      console.log("tolist==",this.topList);

    })
  }
}
</script>

<style scoped>
@import "../assets/css/home.css";

.app {
  padding: 50px 120px;
  background: #f6f6f6;
}

.as {
  float: right;
  /* background: rgb(180, 180, 168); */
}

.main {
  float: left;
  padding-top: 40px;
  background: #f6f6f6;
}
  
.hot{
  font-size: 26px;
  color: #ffb400
}


</style>